<template>
	<view>
		<view class="u-search-box">
			<view class="u-search-inner" @tap="$u.route('/pages/shop/search/search')">
				<u-icon name="search" color="#909399" :size="28"></u-icon>
				<text class="u-search-text">请输入内容</text>
			</view>
		</view>
		<view class="u-p-l-20 u-p-r-20">
			<w-list :list='list' :status='status'>
				<template>
					<view v-for="(item,index) in list" :key="index">
						<w-shop-item :item='item'></w-shop-item>
					</view>
				</template>
			</w-list>
		</view>
	</view>
</template>

<script>
	import {
		goodsQueryGoods
	} from '@/api/shop.js'
	import {
		$shopImgUrl
	} from '@/service/request.js'
	export default {
		data() {
			return {
				list:[],
				status:'loadmore',
				pageNo:1,
				id:''
			}
		},
		onLoad(e){
			this.id = e.id
			this.goodsQueryGoods()
		},
		onReachBottom() {
			this.status='loading'
			this.pageNo++
			this.goodsQueryGoods()
		},
		methods: {
			goodsQueryGoods(){
				goodsQueryGoods({idCategory:this.id,pageNo:this.pageNo,pageSize:10}).then(res=>{
					const arr = res.list
					if(arr.length==10){
						this.status = 'loadmore'
					}else{
						this.status = 'nomore'
					}
					this.list = [...this.list,...arr.map(item=>{
						return {
							src:$shopImgUrl+item.pic,
							...item
						}
					})]
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
.u-search-box {
		padding: 18rpx 30rpx;
	}

	.u-menu-wrap {
		flex: 1;
		display: flex;
		overflow: hidden;
	}

	.u-search-inner {
		background-color: rgb(234, 234, 234);
		border-radius: 100rpx;
		display: flex;
		align-items: center;
		padding: 10rpx 16rpx;
	}

	.u-search-text {
		font-size: 26rpx;
		color: $u-tips-color;
		margin-left: 10rpx;
	}
</style>
